<template>
    <div class="container scopClass">

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 选项1开始 -->
            <!-- <el-tab-pane label="追溯查询ཁུངས་འདེད་འདྲི་རྩད་ " name="追溯查询"> -->
                        <el-tab-pane label="追溯查询" name="追溯查询">
                <h3 style="margin-top: 20px ">追溯查询</h3>
              <h3 v-show="$store.state.zangw=='1'">ཁུངས་འདེད་འདྲི་རྩད་</h3>
                <el-form ref="form" :model="form1" label-width="100px" label-position="left">

                    <!-- <el-form-item label="查询方式" >
                      <div slot="label">查询方式</div>
                      <div slot="label" style="line-height: 0px">འདྲི་རྩད་བྱེད་སྟངས་ </div>
                        <el-radio v-model="form1.method" label="1">产品批号查询ཐོན་རྫས་ཐོན་རིམ་ཨང་གྲངས་འདྲི་རྩད་ </el-radio>
                        <el-radio v-model="form1.method" label="2">追溯码查询ཁུངས་འདེད་ཨང་གྲངས་འདྲི་རྩད་ </el-radio>
                    </el-form-item> -->
                       <el-form-item label="查询方式" >
                      <div slot="label">查询方式</div>
                      <!-- <div slot="label" style="line-height: 0px">འདྲི་རྩད་བྱེད་སྟངས་ </div> -->
                        <el-radio v-model="form1.method" label="1">产品批号查询</el-radio>
                        <el-radio v-model="form1.method" label="2">追溯码查询</el-radio>
                    </el-form-item>
                    <div v-show="form1.method != 2">
                        <el-form-item label="追溯类型" @click.native="showTable1" >
                          <div slot="label">查询方式</div>
                          <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">འདྲི་རྩད་བྱེད་སྟངས་ </div>
                            <el-input style="width: 220px" placeholder="请选择"></el-input>
                        </el-form-item>

                        <el-form-item label="品名" @click.native="showTable1" >
                          <div slot="label">查询方式</div>
                          <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">འདྲི་རྩད་བྱེད་སྟངས་ </div>
                            <el-input style="width: 220px" placeholder="请选择"></el-input>
                        </el-form-item>
                        <el-form-item label="批号" @click.native="showTable1">
                          <div slot="label">查询方式</div>
                          <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">འདྲི་རྩད་བྱེད་སྟངས་ </div>
                            <el-input style="width: 220px" placeholder="请选择"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item v-show="form1.method == 2" label="追溯码" >
                      <div slot="label">查询方式</div>
                      <div slot="label" style="line-height: 0px" v-show="$store.state.zangw=='1'">འདྲི་རྩད་བྱེད་སྟངས་ </div>
                        <el-input v-model="form1.zsId" placeholder="请扫描/输入追溯码" style="width: 220px"></el-input>
                    </el-form-item>
                </el-form>

                <!-- 弹出选择 -->


                <!-- 选项1结束 -->
            </el-tab-pane>
            <!-- 选项2开始 -->
            <!-- <el-tab-pane label="GAP记录打印" name="GAP记录打印">
                <el-row style="margin: 20px 0">
                    <h3>GAP记录打印</h3>
                </el-row>

            </el-tab-pane> -->
            <!-- 选项3开始 -->

            <!-- <el-tab-pane label="产品召回ཐོན་རྫས་ཕྱིར་སྡུད་ " name="产品召回"> -->
                   <el-tab-pane label="产品召回 " name="产品召回">
                <div v-show="recall">
                    <el-row type="flex" justify="space-between" style="margin: 20px 0">
                        <!-- <h3>产品召回ཐོན་རྫས་ཕྱིར་སྡུད་</h3> -->
                         <h3>产品召回</h3>
                        <el-button type="primary" v-if="!added" @click="addrecall">新增召回</el-button>
                    </el-row>
                    <el-table :data="tableDatalist" border ref="multipleTable" header-cell-class-name="table-header">
                        <!-- <el-table-column prop="productName" sortable label="产品名称ཐོན་རྫས་ཀྱི་མིང་ "></el-table-column>
                        <el-table-column prop="traceStep" sortable label="召回范围ཕྱིར་སྡུད་ཁྱབ་ཁོངས་ "></el-table-column>
                        <el-table-column prop="batchNo" sortable label="批号ཆོག་མཆན་ཨང་གྲངས། "></el-table-column>
                        <el-table-column prop="username" sortable label="操作人བཀོལ་སྤྱོད་བྱེད་མཁན་ "></el-table-column>

                        <el-table-column label="操作བཀོལ་སྤྱོད། " width="150" align="center"> -->
                                <el-table-column prop="productName" sortable label="产品名称 "></el-table-column>
                        <el-table-column prop="traceStep" sortable label="召回范围"></el-table-column>
                        <el-table-column prop="batchNo" sortable label="批号 "></el-table-column>
                        <el-table-column prop="username" sortable label="操作人"></el-table-column>

                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="handleView(scope.$index, scope.row)">查看</el-button>

                                <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        layout="total, prev, pager, next, jumper"
                        :page-size="pagesize3"
                        @current-change="handleCurrentChange3"
                        :total="total3"
                        :current-page.sync="currentPage3"
                        style="margin-top: 20px"
                    ></el-pagination>
                </div>
                <div v-show="!recall">
                    <el-form :model="form3">
                        <el-row>
                            <el-row type="flex" justify="space-between" style="margin: 20px 0">
                                <h3>产品召回</h3>
                            </el-row>
                            <el-col :span="12">
                                <el-form-item label="名称：" >
                                    <el-input placeholder="请输入内容" v-model="recalls.productName" @click.native="showTable1" style="width: 300px"></el-input>
                                </el-form-item>
                                <el-form-item label="批号：" >
                                    <el-input placeholder="请输入内容" v-model="recalls.batchNo" style="width: 300px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="召回范围：" >
                                    <el-select style="width: 300px" v-model="recalls.traceStep">
                                        <el-option
                                            :label="item"
                                            :value="item"
                                            v-for="(item, index) in queryForm1.types"
                                            :key="index"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="召回时间：" >

                                    <el-date-picker style="width:300px;" v-model="recalls.recallDate" value-format="yyyy/MM/dd" type="date" placeholder="选择日期"> </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <div style="margin-bottom: 20px">召回原因及公告</div>
                                <el-form-item>
                                    <el-input type="textarea" v-model="recalls.reason"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div>
                            <h3 style="margin-bottom: 20px">产品流向</h3>
                            <el-table :data="chains" border ref="multipleTable" header-cell-class-name="table-header">
                                <el-table-column prop="productName" sortable label="名称"></el-table-column>
                                <el-table-column prop="spec" sortable label="规格"></el-table-column>
                                <el-table-column prop="num" sortable label="数量"></el-table-column>
                                <el-table-column prop="clientName" sortable label="客户名称"></el-table-column>
                            </el-table>
                        </div>
                    </el-form>
                </div>
            </el-tab-pane>
        </el-tabs>
		<el-dialog title="修改召回原因" :visible.sync="dialogTableVisible1">
		   <el-form>
			   <el-form-item>
			       <el-input type="textarea" v-model="reason" rows="15"></el-input>
			   </el-form-item>

		   </el-form>
		   <div slot="footer" class="dialog-footer">
		   	<el-button @click="close">取 消</el-button>
		   	<el-button type="primary" @click="save">确 定</el-button>
		   </div>
		</el-dialog>
		<el-dialog title="请选择" :visible.sync="dialogTableVisible">
		    <el-row>
		        <el-col :span="11">
		            <el-form>
		                <el-form-item label="追溯类型">
		                    <el-select v-model="queryForm1.type">
		                        <el-option
		                            :label="item"
		                            :value="item"
		                            v-for="(item, index) in queryForm1.types"
		                            :key="index"
		                        ></el-option>
		                    </el-select>
		                </el-form-item>
		            </el-form>
		        </el-col>
		        <el-col :span="11">
					<el-form>
						<el-form-item label="品名">
							<el-input style="width:200px;" v-model="searchName"></el-input>
						</el-form-item>
					</el-form>

		        </el-col>
		        <el-col :span="2"><el-button v-if="!check" @click="getTable1" type="primary">查询</el-button></el-col>
		    </el-row>
		    <el-table :data="tableData1" border ref="multipleTable" header-cell-class-name="table-header">
		        <el-table-column prop="sztype" sortable label="追溯类型"></el-table-column>
		        <el-table-column prop="productName" sortable label="品名"></el-table-column>
		        <el-table-column prop="storageBatch" sortable label="批号"></el-table-column>
		        <el-table-column label="操作" width="150" align="center">
		            <template slot-scope="scope">
		                <el-button type="text" @click="handleSelect(scope.$index, scope.row)">选择</el-button>
		            </template>
		        </el-table-column>
		    </el-table>
		    <el-pagination
		        layout="total, prev, pager, next, jumper"
		        :page-size="pagesize1"
		        :current-page.sync="queryForm1.page"
		        :total="total1"
		        @current-change="handleCurrentChange1"
		        style="margin-top: 20px"
		    ></el-pagination>
		</el-dialog>

       <el-form>
            <el-form-item style="padding-left: 120px" class="footerFixed">
                <el-button @click="handleRecall" v-show="recallFixed" type="primary">召回</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import { base_findByList, base_delete,storage_findByList,plant_findByList,reap_findByList,process_findByList,recall_page,recall_add,recall_chain,recall_load,recall_edit } from '@/request/api';
export default {
    data() {
        return {
			loading:false,
			dialogTableVisible1:false,
            activeName: '追溯查询',
            tableDatalist:[],
			tableDataone:[],
            dialogTableVisible: false,
            form1: {
                method: '1',
                type: '',
                name: '',
                id: '',
                zsId: ''
            },
            queryForm1: {
                page: 1,
                type: '种植',
                types: ['种植','采收','初加工', '采购入库'],
                name: '大黄',
                names: ['大黄', '天麻']
            },
            tableData1: [],
			recalls:{},
			chains:[],
            // tab - 2

            // tab - 3
            ruleForm: {},
            recall: true,
            recallFixed: false,
            form3: {},

            searchName: '',
            searchName2: '',
            searchName3: '',
            total1: 0,
            pagesize1: 10,
            total2: 0,
            currentPage: 1,
            pagesize2: 10,
            total3: 0,
            currentPage3: 1,
            pagesize3: 10,

            listUrl: '',
            action: '',
            added: true,
            check: true,
			source:'',
			id:'',
			reason:''
        };
    },
    created() {},
    mounted() {
        if(this.queryForm1.type == "初加工"){
        	this.source = "加工入库"
        	this.init4()
        }else if(this.queryForm1.type == "采购入库"){
        	this.source = this.queryForm1.type
        	this.init1()
        }else if(this.queryForm1.type == "种植"){
        	this.init2()
        }else{
			this.init3()
        }
        this.getrecallpage()
        this.judgmentAuthority()
    },
    destroyed: function () {},
    methods: {

		save(){
			let data = {
				id:this.id,
				reason:this.reason
			}
			recall_edit(data).then((res)=>{
				this.$notify({
				    title: '提示',
				    message: '编辑成功',
				    type: 'success',
				    duration:1000
				});
				this.dialogTableVisible1 = false
			})
		},
		close(){
			this.dialogTableVisible1 = false
		},

		getrecallpage(){
			let data = {
				pageno:this.currentPage3,
				pagesize:10,
			}

			recall_page(data).then((res)=>{
				this.tableDatalist = res.rows
				this.total3 = res.total

			})
		},

        // tabs
        handleClick(tab, event) {
            this.recallFixed = false;
            this.recall = true;
        },
        // tab - 1
        showTable1() {
            this.dialogTableVisible = true;
        },
        handleSelect(index, row) {
			this.recalls.productName = row.productName
			this.recalls.batchNo = row.storageBatch
			this.recalls.traceStep = row.sztype
			if(this.activeName == "产品召回"){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				// this.loading = true
				var traceStep = ""
				if(row.sztype == "初加工"){
					traceStep = "processDetail"
				}else if(row.sztype == "采购入库"){
					traceStep = "storageManage"
				}else if(row.sztype == "种植"){
					traceStep = "plant"
				}else{
					traceStep = "reapDetail"
				}
				let data = {
					batchNo:row.batch,
					traceStep:traceStep
				}
				recall_chain(data).then((res)=>{
					this.chains = res.data
					// this.loading = false
					loading.close();
					this.dialogTableVisible = false;
				})
			}else{
				if(this.queryForm1.type == "初加工"){
					this.$router.push({
						path:'/review/checkreview',
						query:{id:row.id}
					})
				}else if(this.queryForm1.type == "采购入库"){
					this.$router.push({
						path:'/review/check',
						query:{id:row.id}
					})
				}else if(this.queryForm1.type == "种植"){
					this.$router.push({
						path:'/review/tending',
						query:{
							id:row.id
						}
					})
				}else{
					this.$router.push({
						path:'/review/checkrecovery',
						query:{id:row.id}
					})
				}
			}

        },
        getTable1() {
			// console.log(1)
			this.currentPage =1
			if(this.queryForm1.type == "初加工"){
				this.source = "加工入库"
				this.init4()
			}else if(this.queryForm1.type == "采购入库"){
				this.source = this.queryForm1.type
				this.init1()
			}else if(this.queryForm1.type == "种植"){
				this.init2()
			}else{
				this.init3()
				// console.log(111)
			}


        },
        handleCurrentChange1(val) {
            this.currentPage = val;
            if(this.queryForm1.type == "初加工"){
            	this.source = "加工入库"
            	this.init4()
            }else if(this.queryForm1.type == "采购入库"){
            	this.source = this.queryForm1.type
            	this.init1()
            }else if(this.queryForm1.type == "种植"){
            	this.init2()
            }else{
				this.init3()
            }
        },
		init4(){
			let data = {
				page:this.currentPage,
				productName:this.searchName
			}
			process_findByList(data).then((res)=>{
				this.tableData1 = res.rows
				this.total1 = res.total
				for(var i=0;i<this.tableData1.length;i++){
					this.tableData1[i].sztype = this.queryForm1.type
					this.tableData1[i].productName = this.tableData1[i].productName
					this.tableData1[i].storageBatch = this.tableData1[i].batch
				}
			})
		},
		init3(){
			let data = {
				page:this.currentPage,
				searchName:this.searchName
			}
			reap_findByList(data).then((res)=>{
			    this.tableData1 = res.rows
			    this.total1 = res.total
			    for(var i=0;i<this.tableData1.length;i++){
			    	this.tableData1[i].sztype = this.queryForm1.type
			    	this.tableData1[i].productName = this.tableData1[i].reapName
			    	this.tableData1[i].storageBatch = this.tableData1[i].batch
			    }
			})
		},
		init2(){
			plant_findByList({page:this.currentPage,plantName:this.searchName}).then((res)=>{
			    this.tableData1 = res.rows
			    this.total1 = res.total
				for(var i=0;i<this.tableData1.length;i++){
					this.tableData1[i].sztype = this.queryForm1.type
					this.tableData1[i].productName = this.tableData1[i].plantName
					this.tableData1[i].storageBatch = this.tableData1[i].batch
				}
			})
		},
        init1() {
            // this.getTable1();

			let data = {
				warehouseId:this.warehouseId,
				productName:this.searchName,
				source:this.source,
				page:this.currentPage
			}
			storage_findByList(data).then((res)=>{
				this.tableData1 = res.rows
				this.total1 = res.total
				for(var i=0;i<this.tableData1.length;i++){
					this.tableData1[i].sztype = this.queryForm1.type
					this.tableData1[i].storageBatch = this.tableData1[i].batch
					var st = this.tableData1[i].specsUnit.substr(this.tableData1[i].specsUnit.lastIndexOf('/', this.tableData1[i].specsUnit.lastIndexOf('/') - 1) + 1);
					var str = st.lastIndexOf("\/")
					this.tableData1[i].units = st.substring(0,str)
				}
				console.log(this.tableData1)
			})
        },

        // tab - 2

        // tab - 3
        addrecall() {
            this.recall = false;
            this.recallFixed = true;
        },

        handleYard() {
            this.dialogTableVisible = true;
        },

        //
        handleEdit(index, row) {
			this.reason = row.reason
			this.dialogTableVisible1 = true
			this.id = row.id
            // this.$router.push({
            //     path:'/materialsManagement/added',
            //     query:{
            //         id: row.id
            //     }
            // })
        },
        // 查看
        handleView(index, row) {
			this.recallFixed = false
			this.recall = false
			recall_load(row.id).then((res)=>{
				this.recalls = res.recall
				this.chains = res.chains
			})
		},
        // 删除
        handleDelete(index, row) {

        },
        // 列表搜索
        handleSearch1() {
            this.currentPage1 = 1;
            this.init1();
        },
        handleSearch2() {
            this.currentPage2 = 1;
            this.init2();
        },
        handleSearch3() {
            this.currentPage3 = 1;
            this.init3();
        },
        handleRecall() {
			this.$confirm('请仔细核对所填信息，提交后该批产品全部召回，无法再次销售！', '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			}).then(() => {
				// this.loading = true
				let data = {
					recall:this.recalls,
					chains:this.chains
				}
				// console.log(data)
				recall_add(data).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '召回成功',
					    type: 'success',
					    duration:1000
					});
					// this.loading = false
					this.chains = []
					this.recalls = {}
					this.recall = true
					this.getrecallpage()
				})
			})
		},
        // 分页事件
        // handleCurrentChange1(val){
        //     this.currentPage1 = val
        //     this.init1()
        //     console.log(val);
        // },
        handleCurrentChange2(val) {
            this.currentPage2 = val;
            this.init2();
        },
        handleCurrentChange3(val) {
            this.currentPage3 = val;
            this.getrecallpage()
        },

        uploadonchange(file) {},
        //判定操作按钮显示
        judgmentAuthority() {
			// console.log(11)
            var type = JSON.parse(localStorage.getItem('panduanzhuangtai'));
			// console.log(type)
            type.map((item1) => {
				// console.log(item1.name)
                if (item1.name == '追溯查询' && item1.children != null) {
                    for (var i = 0; i < item1.children.length; i++) {
						console.log(item1.children[i])
                        if (item1.children[i].name == "查询") this.check = false;

                        if (item1.children[i].name == '新增') this.added = false;
                    }
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
// 深度作用器
/deep/.upload-daoru {
    .el-upload {
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px;
    }
}
.el-col {
    margin-bottom: 0;
}

.el-pagination {
    text-align: center;
}
</style>
